<template>
  <div class="examine-detail">
    <el-card shadow="never">
      <div class="examine-status">
        <i class="el-icon-question" /><span>审核状态：</span><span>{{ auditStatusMap[auditWorkerInfoVO.auditStatus] }}</span>
      </div>
      <h3>审核内容</h3>
      <div class="examine-info">
        <div class="info-title">
          审核信息
        </div>
        <div class="infor-container">
          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content">姓名：{{ auditWorkerInfoVO.realName }}</div></el-col>
            <el-col :span="8"><div class="grid-content">身份证号码： {{ auditWorkerInfoVO.idCard }}</div></el-col>
            <el-col :span="8"><div class="grid-content">手机号： {{ auditWorkerInfoVO.phone }}</div></el-col>
            <el-col v-if="auditWorkerInfoVO.categoryDetails && auditWorkerInfoVO.categoryDetails.length > 0" :span="8">
              <div class="grid-content">服务品类： {{ auditWorkerInfoVO.categoryDetails.join(',') }}</div>
            </el-col>
            <el-col v-if="auditWorkerInfoVO.areaDetails && auditWorkerInfoVO.areaDetails.length > 0" :span="8">
              <div class="grid-content">服务区域： {{ auditWorkerInfoVO.areaDetails.join(',') }}</div>
            </el-col>
            <el-col :span="24">
              <div v-if="auditWorkerInfoVO.attachInfo && auditWorkerInfoVO.attachInfo.length > 0" class="grid-content-last">
                <div class="title">身份证照片：</div>
                <div class="images-container">
                  <el-image
                    v-for="(item,index) in auditWorkerInfoVO.attachInfo"
                    :key="index"
                    class="sf-image"
                    :src="item"
                    :preview-src-list="auditWorkerInfoVO.attachInfo"
                    fit="fill"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-table
          v-if="auditWorkerInfoVO.auditStatus != 2"
          :data="auditInfo"
          stripe
          :header-cell-style="{background:'#f2f3f5',color:'#606266'}"
          class="table-data"
        >
          <el-table-column prop="auditStatus" label="审核意见" align="center" :show-overflow-tooltip="true" min-width="150">
            <template slot-scope="scope">
              <span> {{ auditStatusMap[scope.row.auditStatus] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="operateName" label="审核人" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="operateTime" label="审核时间" align="center" :show-overflow-tooltip="true" min-width="180">
            <template slot-scope="scope">
              <span> {{ formatTimes(scope.row.operateTime,"YYYY/MM/DD hh:mm:ss") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="rejectReason" label="驳回原因" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="remark" label="备注信息" align="center" :show-overflow-tooltip="true" min-width="150" />
        </el-table>
        <div class="infor-container">
          <el-row :gutter="20">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
              <el-col :span="24">
                <el-form-item label="审核意见" prop="auditStatusValue">
                  <el-radio-group v-model="ruleForm.auditStatusValue" :disabled="!$route.query.isExamine">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="0">驳回</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="ruleForm.auditStatusValue == 0" :span="24">
                <el-form-item label="驳回原因" prop="rejectReason">
                  <el-select v-model="ruleForm.rejectReason" placeholder="请选择驳回原因" :disabled="!$route.query.isExamine">
                    <el-option v-for="(item,index) in rejectReasonData" :key="index" :label="item.name" :value="item.name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="ruleForm.auditStatusValue == 0" :span="24">
                <el-form-item label="备注信息" prop="remark">
                  <el-input
                    v-model="ruleForm.remark"
                    type="textarea"
                    placeholder="请填写备注信息"
                    maxlength="200"
                    show-word-limit
                    :disabled="!$route.query.isExamine"
                  />
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card v-if="$route.query.isExamine" shadow="never" class="card-bottom">
      <div class="bottom-btn">
        <el-button @click="goBack()">返 回</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getWorkerDetail, auditSave } from '@/api/worker'
import { formatTimes } from '@/utils'
import { auditStatusMap, rejectReasonData } from './common'
export default {
  data() {
    return {
      formatTimes,
      auditStatusMap,
      rejectReasonData,
      ruleForm: {
        auditStatusValue: 1
      },
      auditInfo: [],
      auditWorkerInfoVO: {},
      rules: {
        auditStatus: [
          { required: true, message: '请选择审核意见', trigger: 'change' }
        ],
        rejectReason: [
          { required: true, message: '请选择驳回原因', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请选择驳回原因', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getWorkerDetail()
  },
  methods: {
    // 获取审核详情
    async getWorkerDetail() {
      try {
        const formData = new FormData()
        formData.append('workerId', this.$route.query.userId)
        const res = await getWorkerDetail(formData)
        this.auditInfo = res.auditInfo
        this.auditWorkerInfoVO = res.auditWorkerInfoVO
      } catch (error) {
        console.log(error)
      }
    },
    // 确定按钮功能
    async submitForm() {
      if (process.env.VUE_APP_PACKAGE === 'externalize') {
        try {
          await this.$confirm('亲，这是演示版，你没有权限!,想获得所有权限，请联系咨询老师，获取代码', '系统提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        } catch (error) {
          console.log(error)
        }
        return
      }
      this.$refs['ruleForm'].validate(async(valid) => {
        if (valid) {
          const parmas = {
            auditStatus: this.ruleForm.auditStatusValue,
            workerId: this.$route.query.userId
          }
          if (this.ruleForm.auditStatusValue == 0) {
            parmas.rejectReason = this.ruleForm.rejectReason
            parmas.remark = this.ruleForm.remark
          }
          await auditSave(parmas)
          this.$message.success('审批成功')
          this.$router.go(-1)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 返回到上一页面
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.examine-detail{
  .examine-status{
    padding: 10px 30px;
    font-size: 14px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.65);
    background: #F2F3F6;
    .el-icon-question{
      color: #1890FF;
    }
  }
  .examine-info{
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    padding-bottom: 30px;
    .info-title{
      background: #F2F3F6;
      padding: 10px 30px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .infor-container{
      margin-top: 20px;
      padding: 10px 40px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-weight: normal;
      .grid-content{
        padding: 15px 0px;
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }
      .el-select {
        width: 360px;
      }
      .el-textarea{
        width: 360px;
      }
      .grid-content-last{
        padding: 15px 0px;
        display: flex;
        justify-content: flex-start;
        .title{
          font-size: 14px;
          color: #606266;
          font-weight: 500;
        }
        .images-container{
          display: flex;
          .sf-image{
            width: 300px;
            height: 150px;
            margin-right: 15px;
          }

        }
      }
    }
  }
  .card-bottom{
    margin-top: 15px;
    .bottom-btn{
      text-align: center;
    }
  }
}
</style>
